<template>
  <div>
    <!-- 基本信息 -->
    <div v-for="(item, index) in overviewData" class="mb-5" :key="index">
      <el-descriptions
        class="margin-top"
        title="With border"
        :column="2"
        border
      >
        <template #title>
          <TitleName
            :title="item.title"
            icon="i-carbon-bookmark-filled"
            class="title"
          ></TitleName>
        </template>
        <el-descriptions-item
          :label="t.label"
          v-for="(t, i) in item.list"
          :key="i"
          label-align="right"
          label-class-name="w-3/24"
          class-name="w-9/24"
        >
          <!--      商机阶段        -->
          <template v-if="t.prop === 'status'">
            <dict-tag
              :isTag="false"
              :options="business_stage"
              :value="overviewInfo[t.prop]"
            />
          </template>

          <!-- proSum 预计销售金额 -->
          <template v-else-if="t.prop === 'revenue'">
            {{
              overviewInfo[t.prop] != null ? overviewInfo[t.prop] + '元' : ''
            }}
          </template>
          <!-- 联系人 -->
          <template v-else-if="t.prop === 'attnName'">
            {{ overviewInfo[t.prop] }}
          </template>
          <!--      商机来源       -->
          <template v-else-if="t.prop === 'resource'">
            <dict-tag
              :isTag="false"
              :options="business_source"
              :value="overviewInfo[t.prop]"
            />
          </template>
          <!--      项目类型       -->
          <template v-else-if="t.prop === 'projectType'">
            <dict-tag
              :isTag="false"
              :options="project_type"
              :value="overviewInfo[t.prop]"
            />
          </template>
          <template v-else>{{ overviewInfo[t.prop] }}</template>
        </el-descriptions-item>
        <el-descriptions-item
          label="项目关键需求"
          label-align="right"
          :span="2"
          v-if="item.title == '基本信息'"
        >
          {{ overviewInfo.projectDemand }}
        </el-descriptions-item>
        <!-- <el-descriptions-item label="备注信息" label-align="right" :span="2" v-if="item.title=='基本信息'">
          {{ overviewInfo.remark }}
        </el-descriptions-item> -->
      </el-descriptions>
    </div>
  </div>
</template>

<script setup name="POverview">
// import { getCurrentInstance } from 'vue'
import { useRouter } from 'vue-router'
import {
  business_stage,
  business_source,
  project_type
} from '@/hooks/dict/business.js'
const router = useRouter()
// const { proxy } = getCurrentInstance()
// 接受父级传递的参数
const props = defineProps({
  baseInfo: {
    required: true,
    type: Object || Array,
    default: () => {
      return {}
    }
  },
  sysInfo: {
    required: true,
    type: Object || Array,
    default: () => {
      return {}
    }
  }
})
watchEffect(
  () => {
    overviewInfo.value = { ...props.baseInfo, ...props.sysInfo }
    overviewInfo.value.attnName =
      overviewInfo.value.attnName + ' — ' + overviewInfo.value.attnPhone
  },
  {
    flush: 'post'
  }
)

const data = reactive({
  //详情的数据
  overviewInfo: {},
  overviewData: [
    {
      title: '基本信息',
      list: [
        // { label: '商机标题', prop: 'titleName' },
        { label: '客户名称', prop: 'customerName' },
        { label: '预计销售金额', prop: 'revenue' },
        // { label: '联系电话', prop: 'attnPhone' },
        { label: '联系人', prop: 'attnName' },
        { label: '预计签单日期', prop: 'saleDate' },
        { label: '商机阶段', prop: 'status' },
        // { label: '项目类型', prop: 'projectType' },
        { label: '商机来源', prop: 'resource' },
        { label: '归属公司', prop: 'orgName' },
        { label: '归属人员', prop: 'belongName' }
        // { label: '创建日期', prop: 'createTime' },
      ]
    },
    {
      title: '系统信息',
      list: [
        { label: '系统编号', prop: 'businessNum' },
        { label: '协作人员', prop: '' },
        { label: '所属部门', prop: 'deptName' },
        { label: '创建人员', prop: 'createName' }, //原来createBy
        // { label: '前归属人', prop: 'belongName' },
        // { label: '前所属部门', prop: '' },
        { label: '创建时间', prop: 'createTime' },
        { label: '更新时间', prop: 'updateTime' },
        { label: '最后跟进', prop: 'followTime' }
        // { label: '下次跟进', prop: '' }
      ]
    }
  ]
})
const { overviewData, overviewInfo } = toRefs(data)
</script>

<style scoped lang="scss"></style>
